<script lang="jsx">
/**
 * @author lilinjie
 * @Description:
 */

import { defineComponent, onMounted, ref } from 'vue'
import { useList } from '@/hooks/common/useList'
import { useCuModal } from '@/hooks/common/useCuModal'
import { addCategory, deleteCategory, searchCategory, updateCategory } from '@/api/category'
import { columns } from '@/config/category'
import { useProvideData } from '@/context/category'
import CategoryModal from './modal.vue'
import { message } from 'ant-design-vue'

export default defineComponent({
  name: 'Category',
  setup() {
    // 表单部分
    const {
      filterForm,
      clearForm,
      handleSearch,
      tableData,
      pagination,
      handleCurrentChange,
      handleSizeChange
    } = useList({
      defaultFilterForm: {
        name: null,
        parentName: null,
      },
      getList: ({ onSuccess }) => {
        searchCategory({...filterForm, ...pagination }).then(res => {
          onSuccess({
            list: res.data.list?.map((item, index) => {
              return {
                ...item,
                index: index + 1
              }
            }),
            total: res.data.total
          })
        })
      }
    })

    // 弹窗部分
    const {
      cuFilterForm,
      modelData,
      isEdit,
      onClickClose,
      onClickConfirm,
      onClickCreate,
      onClickEdit,
      onClickView
    } = useCuModal({
      defaultCuFilterForm: {
        index: undefined,
        name: undefined,
        parentName: undefined,
        imgUrl: undefined,
      },
      create({ cuFilterForm, onSuccess }) {
        console.log('create', cuFilterForm)
        addCategory(cuFilterForm).then(res => {
          console.log(res)
          onSuccess()
          handleSearch()
        })
      },
      update({ cuFilterForm, currentId, onSuccess }) {
        updateCategory({ id: parseInt(currentId), ...cuFilterForm }).then(res => {
          console.log(res)
          onSuccess()
          handleSearch()
        }).catch(err => {
          message.error(err)
        })
      }
    })

    // 提供上下文
    useProvideData({
      cuFilterForm,
      modelData,
      isEdit,
      onClickClose,
      onClickConfirm,
      onClickCreate,
      onClickEdit,
      onClickView
    })

    onMounted(() => {
      handleSearch()
    })

    const onClickDelete = (id) => {
      console.log(id)
      deleteCategory({ id: id }).then(res => {
        handleSearch()
        console.log(res)
      })
    }

    return () => {
      const tableSlot = {
        bodyCell: ({ text, record, index, column }) => {
          if (column.dataIndex === 'action') {
            return <a-space>
              <a-button type="link" size="small" onClick={() => onClickView(record)}>查看</a-button>
              <a-button type="primary" size="small" onClick={() => onClickEdit(record)}>编辑</a-button>
              <a-button danger size="small">
                <a-popconfirm title="确认删除这个分类吗" ok-text="确认" cancel-text="取消"
                              onConfirm={() => onClickDelete(record.id)}
                >
                  删除
                </a-popconfirm>
              </a-button>
            </a-space>
          }

          if (column.dataIndex === 'imgUrl') {
            return <a href={text} target="_blank" class="img-box">
              <img src={text} class="img" />
              <span class="img-text">{text}</span>
            </a>
          }

          if (column.dataIndex === 'createTime') {
            return <span>{text.split('T')[0] + ' ' + text.split('T')[1].split('.')[0]}</span>
          }
        }
      }

      return (
          <div class="product">
            <div class="header">
              <a-form class="form" layout="inline">
                <a-form-item label="分类名">
                  <a-input placeholder="请输入分类名" onChange={handleSearch} vModel:value={filterForm.name} />
                </a-form-item>
                <a-form-item label="父分类">
                  <a-input placeholder="请输入父分类" onChange={handleSearch} vModel:value={filterForm.parentName} />
                </a-form-item>
                <a-space>
                  <a-button onClick={() => {
                    clearForm()
                    handleSearch()
                  }}>重置</a-button>
                  <a-button onClick={handleSearch}>查询</a-button>
                </a-space>
              </a-form>
              <a-button type="primary" onClick={onClickCreate}>新增</a-button>
            </div>
            <a-table class="table"
                     columns={columns}
                     dataSource={tableData?.data.list}
                     v-slots={tableSlot}
            />
            <CategoryModal />
          </div>
      )
    }
  }
})
</script>

<style lang="less" scoped>
@import '@/assets/less/common-style.less';

.product {
  .header {
    .flex(space-between);

    .ant-btn-primary {
      margin-right: 50px;
    }
  }

  .table {
    padding: 0 24px;
    height: calc(100vh - @nav-bar-height - 60px);
    overflow: auto;
  }

  .form {
    margin: 20px 50px;
  }
}

.img-box {
  .common-img-box();
}
</style>
